<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
    <el-form-item label="知识名称" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="关联知识点" prop="abilityInfoIds">
      <el-cascader
        v-model="ruleForm.abilityInfoIds"
        :show-all-levels="false"
        :options="skills"
        :props="props"
        clearable
      />
    </el-form-item>
    <el-form-item label="是否反转">
      <el-radio-group v-model="ruleForm.flip">
        <el-radio-button label="0">否</el-radio-button>
        <el-radio-button label="1">是</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="视频地址" prop="url">
      <el-input v-model="ruleForm.url" />
    </el-form-item>
    <el-form-item>
      <tinymce id="des" v-model="ruleForm.description" :height="300" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { stringToIntArray } from '@/utils/myutil'
export default {
  name: 'KnowledgEdit',
  components: { Tinymce },
  data() {
    return {
      props: { multiple: true, label: 'name', value: 'id' },
      ruleForm: {
        id: '',
        name: '',
        description: '',
        abilityInfoIds: '',
        flip: 0,
        url: ''
      },
      id: undefined,
      options: [],
      skills: null,
      rules: {
        name: [
          { required: true, message: '请输入知识名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        abilityInfoIds: [
          { required: true, message: '请选择关联能力', trigger: 'blur' }
        ],
        url: [
          { type: 'url', message: '必须符合url格式' }
        ]
      }
    }
  },
  created() {
    this.id = this.$store.getters.params.id
    this.getSkills()
    if (this.id !== undefined) {
      this.get('/knowledge/getone', result => {
        this.ruleForm = result.data
        if (result.data.abilityInfoIds !== '') {
          const a = []
          const b = this.ruleForm.abilityInfoIds.split(',')
          for (let i = 0; i < b.length; i++) {
            a.push(stringToIntArray(b[i], '|'))
          }
          this.ruleForm.abilityInfoIds = a
        }
      }, { id: this.id })
    } else {
      this.reset()
    }
  },
  methods: {
    onSubmit() {
      const a = []
      for (let i = 0; i < this.ruleForm.abilityInfoIds.length; i++) {
        a.push(this.ruleForm.abilityInfoIds[i].join('|'))
      }
      this.ruleForm.abilityInfoIds = a
      this.post('/knowledge/save', 'ruleForm', result => {
        this.redirect('Knowledge')
      }, this.ruleForm)
    },
    getSkills() {
      this.get('skill/list', result => {
        this.skills = result.data
      }, { id: 0, isDel: 1 })
    },
    reset() {
      this.ruleForm = {
        id: '',
        name: '',
        description: '',
        abilityInfoIds: '',
        flip: 0,
        url: ''
      }
    }
  }
}
</script>

<style scoped>

</style>
